import * as React from 'react';
import { Link } from 'gatsby';
import { ThemeToggler } from 'gatsby-plugin-dark-mode';

import styles from './index.module.less';

const Header = () => {
  return (
    <header className={styles.header}>
      <div className="header-left">
        <Link to="/">
          <h2 className="site-title">blog</h2>
        </Link>
      </div>
      <div className="header-right">
        <div className="site-menu-container">
          {/* 
          <ul className="site-menu-ul">
            <Link to="/">
              <li className="site-menu">首页</li>
            </Link>
            <li className="site-menu">文章</li>
          </ul>
          */}
        </div>
        <div className="mode-checker">
          <ThemeToggler>
            {({ theme, toggleTheme }) => (
              <label>
                <input
                  type="checkbox"
                  className="theme-changer-input"
                  onChange={e =>
                    toggleTheme(e.target.checked ? 'dark' : 'light')
                  }
                  checked={theme === 'dark'}
                />
                <div className="mode-container">
                  <i className="icon-sun"></i>
                  <i className="icon-moon"></i>
                </div>
              </label>
            )}
          </ThemeToggler>
        </div>
      </div>
    </header>
  );
};

export default React.memo(Header);
